<template>
  <div class="main-mine">
    <div class="stream">
      <qr-stream @decode="onDecode" class="mb">
        <div style="color: red" class="frame"></div>
      </qr-stream>
      <!-- 图片上传二维码识别 -->
      <!-- <qr-capture @decode="onDecode" class="mb">
        <div style="color: red" class="frame"></div>
      </qr-capture> -->
    </div>
    <div class="result">Result: {{ data }}</div>
  </div>
</template>

<script>
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader'
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
  name: 'Qrcode3',
  components: {
    QrStream,
    QrCapture,
    QrDropzone
  },
  setup() {
    const state = reactive({
      data: null
    })
    const onDecode = (data) => {
      state.data = data
      console.log(data)
    }
    return {
      ...toRefs(state),
      onDecode
    }
  }
})
</script>
<style lang="less" scoped>
.main-mine {
  background: #ccc;
}
</style>
